<template>
  <div
    class="history"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    :infinite-scroll-distance="3"
  >
    <div class="history-item">
      <ul class="history-list">
        <li v-for="h in viewRecord.data" :key="h.recordId">
          <router-link
            :to="{ name: `history`, params: { userId: h.post.author.userId } }"
          >
            <div class="time-before">{{ h.viewTime | myTime }}</div>

            <div class="history-list-card">
              <div class="avatar">
                <avatar size="medium" :user="h.post.author"></avatar>
              </div>
              <div class="content">
                <div class="author">{{ h.post.author.nickname }}</div>
                <div class="title">
                  {{ h.post.title }}
                </div>
                <div class="viewed-time">
                  {{ h.post.createTime | dateFormat }}
                </div>
              </div>
            </div>
          </router-link>
        </li>
        <footer-loading
          :loading="viewRecord.loading"
          :noMore="noMore"
        ></footer-loading>
      </ul>
    </div>
  </div>
</template>


<script>
import postApi from "@/axios/postApi";
import myTime from "@/filters/MyTime";
import FooterLoading from "@/components/CommonItems/FooterLoading.vue";
export default {
  components: { FooterLoading },
  data() {
    return {
      viewRecord: {
        page: { current: 1, size: 5 },
        data: [],
        loading: true,
      },
    };
  },
  computed: {
    noMore() {
      return (
        (this.viewRecord.page.current == this.viewRecord.page.pages ||
          this.viewRecord.page.pages == 0) &&
        !this.viewRecord.loading
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      this.viewRecord.page.current++;
      this.getList();
    },
    getList() {
      postApi
        .getViewRecords({
          current: this.viewRecord.page.current,
          size: this.viewRecord.page.size,
        })
        .then(({ data }) => {
          this.viewRecord.data = this.viewRecord.data.concat(data.data.records);
          this.viewRecord.page.current = data.data.current;
          this.viewRecord.page.total = data.data.total;
          this.viewRecord.page.pages = data.data.pages;
          //关闭加载动画
          this.viewRecord.loading = false;
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
@import "@/assets/less/common.less";

.history {
  width: 300px;
  overflow-y: scroll;
  height: 450px;
  .history-item {
    display: flex;
    flex-direction: column;
    // &:not(:last-child) {
    //   margin-bottom: 10px;
    // }
    .time-before {
      line-height: 30px;
      font-size: 14px;
      color: #000;
    }
    .history-list-card {
      display: flex;
      padding: 5px;
      border-radius: 5px;
      cursor: pointer;
      &:hover {
        background: @bgGray;
      }
      .avatar {
        margin-right: 10px;
      }
      .content {
        & > *:not(:last-child) {
          margin-bottom: 10px;
        }
        .title {
          height: 36px;
          line-height: 18px;
          color: @primaryText;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          text-overflow: -o-ellipsis-lastline;
          text-overflow: ellipsis;
          word-break: break-word !important;
          word-break: break-all;
          line-break: anywhere;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>